<template>
  <div class="all">
    <!-- 标题栏 -->
    <div class="title">
      <div class="titleName">
        <div class="titlename1" style="color:#00ffff">推荐</div>
        <div class="titlename3" @click="toFollow">关注</div>
        <div class="titlename2" @click="toMY">我的</div>
      </div>
    </div>
    <!-- <div class="searchFollow">
      <van-search
        background="#000"
        v-model="value"
        placeholder="请输入要关注的账号"
      />
      <el-button style="height:35px;margin-top:10px" @click="addfollow"
        >加关注</el-button
      >
    </div> -->
    <!-- 推送消息实现滚动 -->
    <div class="scroll">
      <span style="font-size:20px;color:yellow"
        >上蓝目数字官网www.lanmuda.com.cn
        ，下载蓝目训练器电脑版，DIY我的策略</span
      >
    </div>
    <div class="box_promotionlist">
      <div
        v-show="accountDatasPromote.length === 0"
        style="color:#fff;font-size:20px"
      >
        请稍后。。。
      </div>
      <!-- 调试的时候方便使用 -->
      <!-- <el-button @click="flash1">刷新</el-button> -->
      <div
        class="card"
        v-for="(item, id) in accountDatasPromote"
        :key="id"
        v-show="item.account_name === '系统仿真账户'"
        @click="toAdd(id)"
      >
        <div class="LeftBox">
          <div class="mess1">
            <div class="mess2">账号</div>
            <div class="mess3" style="color:rgb(216, 108, 7)">
              {{ newAccount(item.acc_nick_name) }}
            </div>
          </div>
          <div class="mess1" style="margin-top:4px">
            <div class="mess2">资产总值</div>
            <div class="mess3">{{ towNumber(item.total_asset) }}</div>
          </div>
          <div class="mess1">
            <div class="mess2">证券市值</div>
            <div class="mess3">
              {{ towNumber(item.stock_value) }}
            </div>
          </div>
        </div>
        <div class="RightBox">
          <!-- <div class="mess1">
            <div class="mess4">冻结资金</div>
            <div class="mess5" style="color:yellow">
              {{ towNumber(item.frozen_cash) }}
            </div>
          </div> -->
          <div class="mess1">
            <div class="mess2">收益率</div>
            <div class="mess3">
              <span
                v-if="item.total_asset >= 1000000"
                style="color:red;font-size:18px"
                >{{ towNumber((item.total_asset - 1000000) / 10000) }}%</span
              >
              <span
                v-if="item.total_asset < 1000000"
                style="color:#06e108;font-size:18px"
                >{{ towNumber((item.total_asset - 1000000) / 10000) }}%</span
              >
            </div>
          </div>
          <div class="mess1">
            <div class="mess2">资金余额</div>
            <div class="mess3" style="color:yellow">
              {{ towNumber(item.balance) }}
            </div>
          </div>
          <div class="mess1">
            <div class="mess2">状态</div>
            <div class="mess3" style="color:red">{{ item.status }}</div>
          </div>
          <!-- <div class="mess1">
            <div class="mess2">可用资金</div>
            <div class="mess3">
              {{ towNumber(item.available) }}
            </div>
          </div> -->
          <!-- <div class="mess1">
            <div class="mess4">姓名</div>
            <div class="mess5">{{ item.account_name }}</div>
          </div> -->
        </div>
      </div>
      <van-dialog
        v-model="show"
        title="量化算法策略定制声明"
        show-cancel-button
        :before-close="beforeClose"
      >
        <div
          style="font-size:16px;margin:20px;overflow: hidden;overflow-y: initial;height:400px"
        >
          <span style="color:#fff">一一</span
          >蓝目策略训练器所提供的量化算法策略仅是对公开市场相关数据按特定模式进行梳理，并按一定的客观形式呈现，便于用户自行模拟和分析，由量化算法策略进行筛选、计算生成交易计划，策略本身不提供具体投资建议、不推荐具体个股。<br />
          <span style="color:#fff">一一</span
          >本人已充分了解蓝目策略训练器的应用功能及使用风险，现根据自身要求，向杭州蓝目算法技术服务有限公司定制相关策略，相关投资风险自担。订阅即视为已知悉声明。<br />
          对于如下风险，本人已经充分知晓：<br />
          1，每个量化算法策略的历史表现以及由此而推出的对于未来收益的预期，具有一定的概率，仅做参考。<br />
          2，每个量化算法策略都有一个风控止损线，定制的时候需要执行市场运行碰触到止损线的时候，需要进行平仓并停止运行。<br />
          3，自动交易需要在合作券商开通交易权限，并且经过一定时间的训练，通过测试合格后方可开通，本人在使用该方式交易的时候，必须非常熟悉软件的使用流程，以及量化算法策略的设计思路和相关运行参数。如果未通过券商的准入权限，或者对于软件及量化算法策略的运行不熟练而造成的损失，须完全自主承担。<br />
          4，半自动交易量化算法策略，是在本人充分了解量化算法策略的详细信息后，自愿定制，并且在量化算法策略发出交易指令的时候，通过声音、文字提醒等方式来，如果因为不在电脑或者手机旁边而未及时收到量化算法策略提醒，并由此造成投资时机的延误，本人完全自行承担结果。<br />
        </div>
        <div style="margin-left:50px">
          <van-checkbox v-model="checked" shape="square"
            >本人已经阅读完成并同意</van-checkbox
          >
        </div>
      </van-dialog>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Search, Dialog, Checkbox } from 'vant'

import {
  socketsendfollow,
  socketsendgetfollowings,
  socketsendpromote,
  socketsendpromotionlist,
  socketsendgetcontact,
  socketsendaccount
} from '../assets/js/websocketTest.js'

Vue.use(Search)
Vue.use(Dialog)
Vue.use(Checkbox)
export default {
  inject: ['reload'],
  components: {
    [Dialog.Component.name]: Dialog.Component
  },
  data() {
    return {
      value: '',
      show: false,
      checked: false
    }
  },
  computed: {
    accountDatasPromote() {
      return this.sortByKey(
        this.$store.state.accountdataspromote,
        'total_asset'
      )
    }
  },
  methods: {
    // 排序函数
    sortByKey(array, key) {
      return array.sort(function(a, b) {
        var x = a[key]
        var y = b[key]
        return x > y ? -1 : x < y ? 1 : 0
      })
    },
    toMY() {
      this.$router.push('/mobliedata3')
    },
    toFollow() {
      this.$router.push('/follow')
    },
    addfollow() {
      this.$store.state.follow = this.value
      socketsendfollow(this.$store.state.follow)
    },
    towNumber(val) {
      return Number(val).toFixed(2)
    },
    promote() {
      socketsendpromote()
    },
    promotionlist() {
      socketsendpromotionlist()
    },
    getcontact() {
      socketsendgetcontact()
    },
    getfollowings() {
      socketsendgetfollowings()
    },
    flash1() {
      socketsendpromotionlist()
      this.$store.state.accountdataspromote = []
      this.$store.state.transactiondatas = []
      setTimeout(() => {
        console.log(this.$store.state.promotiontoken)
        for (let a = 0; a < this.$store.state.promotiontoken.length; a++) {
          console.log('发送成功' + this.$store.state.promotiontoken[a])
          socketsendaccount(this.$store.state.promotiontoken[a])
        }
        // socketsendaccount('440561b4af12c6ef33b8bc2d69afd68f')
        // console.log('发送成功440561b4af12c6ef33b8bc2d69afd68f')
      }, 100)
      setTimeout(() => {
        if (this.accountDatasPromote.length === 0) {
          this.reload()
        }
      }, 1500)
    },
    pay() {
      const payaxios = this.$axios.create({
        timeout: 1000,
        baseURL: 'https://api.mch.weixin.qq.com/'
      })
      payaxios({
        method: 'POST',
        url: '/v3/pay/transactions/jsapi',
        params: {
          mchid: '1603287544',
          out_trade_no: '1217752501201407033233368318',
          appid: 'wx48082019bee9cc82',
          description: '蓝目数字',
          notify_url: 'http://h5.lanmuda.com.cn/',
          amount: {
            total: 1,
            currency: 'CNY'
          },
          payer: {
            openid: this.$store.state.OPENID
          }
        },
        headers: {
          'Content-Type': 'application/json',
          'Access-Control-Allow-Origin': '*'
        } // 将code传给后台，如果有其他参数需要传递，请一并传递
      }).then(res => {
        alert(res.data)
        // 调取微信支付
        // function onBridgeReady() {
        //   window.WeixinJSBridge.invoke(
        //     'getBrandWCPayRequest',
        //     {
        //       appId: 'wx60d0b1ca182ee849', // 公众号名称，由商户传入
        //       timeStamp: '1395712654', // 时间戳，自1970年以来的秒数
        //       nonceStr: 'e61463f8efa94090b1f366cccfbbb444', // 随机串
        //       package: 'prepay_id=' + res.data.prepay_id,
        //       signType: 'MD5', // 微信签名方式：
        //       paySign: '70EA570631E4BB79628FBCA90534C63FF7FADD89' // 微信签名
        //     },
        //     function(res) {
        //       if (res.err_msg === 'get_brand_wcpay_request:ok') {
        //         alert('恭喜您，支付成功！')
        //       } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
        //         alert('支付失败！')
        //       } else if (res.err_msg === 'get_brand_wcpay_request:fail') {
        //         alert('调起微信支付失败')
        //       }
        //     }
        //   )
        // }
        // onBridgeReady()
        // 微信支付
      })
    },
    newAccount(x) {
      var pattern3 = new RegExp('[0-9]+')
      if (pattern3.test(x)) {
        var newphone = x.substr(0, 3) + '******' + x.substr(x.length - 2)
        return newphone
      } else {
        return x
      }
    },
    beforeClose(action, done) {
      if (action === 'confirm') {
        if (this.checked === true) {
          if (
            this.$store.state.promotionaccount[this.$store.state.INDEX] ===
              '17601387533' &&
            Math.max(this.$store.state.productId) < 3001
          ) {
            Dialog.confirm({
              message: '未开通该功能，请联系057182310420开通'
            })
          } else {
            socketsendfollow(
              this.$store.state.promotionaccount[this.$store.state.INDEX]
            )
            // this.pay()
            Dialog.confirm({
              message: '订阅成功'
            })
          }
          done()
        } else {
          Dialog.confirm({
            message: '请勾选同意策略定制声明'
          })
          done()
        }
      } else {
        done()
      }
    },
    toAdd(id) {
      console.log(Math.max(...this.$store.state.productId))
      for (let i = 0; i < this.$store.state.promotionaccount.length; i++) {
        if (
          this.$store.state.accountdataspromote[id].account ===
          this.$store.state.promotionaccount[i]
        ) {
          console.log(i)
          this.$store.state.zheI = i
          this.$store.state.Activeindex = i
          this.$store.state.INDEX = i
        }
      }
      if (
        this.$store.state.followaccount.indexOf(
          this.$store.state.promotionaccount[this.$store.state.INDEX]
        ) === -1
      ) {
        this.show = true
      } else {
        for (let it = 0; it < this.$store.state.followaccount.length; it++) {
          if (
            this.$store.state.accountdataspromote[id].account ===
            this.$store.state.followaccount[it]
          ) {
            console.log(it)
            this.$store.state.Activeindex = it
            this.$store.state.INDEX = it
          }
        }
        // Dialog.confirm({
        //   title: '该账户已订阅',
        //   message: '请去关注列表中查看详情'
        // })
        this.$router.push({ path: '/networth' })
      }
    }
  },
  mounted() {
    // alert(this.$store.state.OPENID)
    // this.pay()
    this.$store.state.routerPath = this.$route.path
    this.getfollowings()
    setTimeout(() => {
      this.flash1()
    }, 500)
  }
}
</script>
<style Lang="less" scoped>
.all {
  width: 375px;
  min-height: 100vh;
  display: flex;
  margin: 0 auto;
  flex-direction: column;
  background: #010017;
}
.title {
  display: flex;
  flex-direction: row;
  color: #ffffff;
  width: 375px;
}
.titleName {
  display: flex;
  flex-direction: row;
  margin-left: 100px;
}
.titlename1,
.titlename2,
.titlename3 {
  flex: 1;
  margin: 10px;
}
.searchFollow {
  display: flex;
}
.card {
  margin: 30px 15px 0px 15px;
  background-color: #201e33;
  color: #ffffff;
  font-family: PingFang SC;
  margin-top: 0;
  margin-bottom: 20px;
  border-radius: 10px;
  display: flex;
}
.Box {
  display: flex;
}
.LeftBox {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  flex: 1;
}
.RightBox {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  flex: 1;
}
.mess1 {
  display: flex;
  flex-direction: row;
}
.mess2 {
  letter-spacing: 2px;
  font-size: 14px;
  font-family: PingFang-SC-Regular;
  margin: 6px 0 6px 10px;
  flex: 1;
}
.mess3 {
  font-size: 14px;
  margin: 6px 0px 6px 2px;
  flex: 1;
  display: flex;
  flex-direction: row;
}
.mess4 {
  letter-spacing: 2px;
  font-size: 13px;
  margin: 6px 0 6px 10px;
  flex: 1;
}
.mess5 {
  font-size: 10px;
  margin: 6px -10px 6px 2px;
  flex: 1;
  display: flex;
  flex-direction: row;
}
/* 文字滚动动画 */
.scroll {
  position: relative;
  width: 375px;
  height: 50px;
  line-height: 50px;
  font-size: 30px;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
}
.scroll span {
  display: inline-block;
  animation: scroll 10s linear infinite;
}
.scroll span:after {
  position: absolute;
  left: 100%;
  content: attr(data-text);
  margin-left: 8em;
}
@keyframes scroll {
  from {
    transform: translateX(50%);
  }
  to {
    transform: translateX(calc(-100% - 8em));
  }
}
</style>
